<template>
  <div class>
    <!-- banner图 -->
    <div class="banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../../assets/img/bg1.png" />
          </div>
          <div class="swiper-slide">
            <img src="../../assets/img/bg1.png" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="banner-top">
        <img @click="$router.go(-1)" src="../../assets/img/fanhui.png" alt />
        <div>
          <img @click="stars" v-if="star" src="../../assets/img/shoucang.png" alt />
          <img @click="stars" v-else src="../../assets/img/yishoucang.png" alt />
          <!-- <img  id="share" src="../../assets/img/fenxiang.png" alt /> -->
        </div>
      </div>
    </div>
    <!-- house介绍 -->
    <div class="house-introduce">
      <div class="house-introduce-one">
        <span>HPH-海南地产</span>
        <div>
          <img @click="stars" v-if="star" src="../../assets/img/shoucang.png" alt />
          <img @click="stars" v-else src="../../assets/img/yishoucang.png" alt />
          <span>收藏</span>
        </div>
      </div>
      <div class="house-introduce-two">
        <div>
          <div>发行单价：100 USDT</div>
          <div>可申购数量：1000 Token</div>
          <div>开始申购时间：2019-06-18 12:00:00</div>
          <div>结束申购时间：2019-06-18 12:00:00</div>
          <div>
            公布时间：2019-06-18 12:00:00
            <span>申购说明</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情信息 -->
    <div class="house-detail">
      <div class="houseId">
        <div>基本信息</div>
        <div>白皮书</div>
      </div>
      <div class="house-detail-one">
        <div>
          <span>产品：平台流通货币</span>
        </div>
        <div>
          <span>购买：可以用BTC,ETH等主流数字货币及法币购买兑换</span>
        </div>
        <div>
          <span>权益：购买项目份额，享受项目盈利与利益分红</span>
        </div>
      </div>
    </div>
    <!-- 介绍更多 -->
    <div class="house-more">
      <p>
        <span>HPH-海南地产</span>
      </p>
      <div class="house-more-detail">
        <p>产品简介</p>
        <div>
          HPH海南地产项目-“鹏晖新天地“是集大型购物商场（鹏晖商业广场）、甲级写字楼（鹏晖国际大厦）和花园式住宅等设施于一体的多功能城市综合体。用户使用即刻网SPO（主流数字货币皆可兑换）购买该项目token，就相当于持有相关房产份额，持有一个月后即可享受房产+租金+分红收益。
          HPH is a Hainan real estate project - "Penghui New Plaza" is a multi-functional area containing large shopping malls, high-end office buildings and residential buildings.
        </div>
        <div>
          <img src alt />
        </div>
      </div>
      <div class="house-more-detail">
        <p>项目概况</p>
        <div class="project">
          <div>【项目地点】</div>
          <div>创币网</div>
        </div>
        <div class="project">
          <div>【项目估值】</div>
          <div>2000万</div>
        </div>
        <div class="project">
          <div>【项目发行】</div>
        </div>
        <div class="xiangmu">
          HPH海南地产项目
          市值29亿元（均价17000元/㎡，共17.13万平方米）
          共发行10亿枚
          项目初始发行价为：1HPH=1SPO=1元
          项目初始发行值：10亿SPO（即10亿元），约为市场估值的1/3
          上线首发让利价为：1HPH=0.1SPO=0.1元
          项目首发值：1亿SPO（0.1元*10亿枚=1亿元），约为市场估值的1/29
        </div>
        <div class="project">
          <div>【投资预估】</div>
        </div>
        <div class="xiangmu">
          房产共计17.13万平方米
          初始发行房价折合6000元/㎡（该房子市场价值16000元/㎡）
          首发让利价折合600元/㎡（该房子市场价值16000元/㎡）
          因此预计初始发行投资回报率约1.6倍，首发投资回报率约25.7倍
          每年该项目有2500-3000万租金分红，按照用户持有份额分配
        </div>
        <div class="project">
          <div>【项目详情】</div>
        </div>
        <div class="xiangmu">
          1.区位：位于海口市海甸岛美兰区和平大道，西临海口市主干道和平大道，南临海甸四东路，三面被鸭尾溪环绕。
          2.面积：总建筑面积约为17.13万平方米。
          地上建筑面积125844.82㎡，地下建筑面积45456.51㎡。
          容积率为2.564，建筑密度为19.62%，地上及地下共有车位1300个。
          其中鹏晖商业广场建筑面积29714.79㎡（四层商业裙楼），鹏晖国际大厦建筑面积25753.90㎡（大型甲级写字楼），五栋花园式住宅建筑面积71030.46平米。
          市价：本区域在售房产均价为1.6万元/平方米（采价二手房）。
        </div>
        <div class="project">
          <div>【项目集图】</div>
        </div>
         <h4>第三方认证</h4>
         <div class="project">
          <div>【权益证明】</div>
          <div>独立房产证</div>
        </div>
         <div class="project">
          <div>【官网查询】</div>
          <div>http://hkrealestate.haikou.gov.cn/</div>
        </div>
        <div class="project">
          <div>【项目图集】</div>
        </div>
        <div>
           <img src="../../assets/img/bg1.png" />
        </div>
         <div style="margin-top:10px">
           <img src="../../assets/img/bg1.png" />
        </div>
      </div>
    </div>
    <!-- 提醒 -->
    <div v-show="remindItem" @click="remind" class="house-btn">
      <div class="house-btn-left">提醒我</div>
    </div>
    <!-- 取消提醒 -->
    <div v-show="remindId" class="house-btn1">
      <div class="house-btn-left">取消提醒</div>
    </div>
    <div v-show="purchase" class="house-btn">
      <div class="house-btn-left">申购</div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import baseJs from "../../assets/js/base";
export default {
  data() {
    return {
      star: false,
      remindId: false,
      remindItem: true,
      purchase:false
    };
  },
  created() {},
  mounted() {
    //banner初始化
    baseJs.soureDetail();
  },
  methods: {
    //收藏
    stars() {
      this.star = !this.star;
    },
    remind() {
      (this.remindId = true), (this.remindItem = false);
    }
  }
};
</script>
<style lang="less" scoped>
//banner图
.banner {
  width: 100%;
  height: 260px;
  position: relative;
  .swiper-container {
    width: 100%;
    height: 260px;
    z-index: 1;
    .swiper-slide {
      width: 100%;
      height: 260px;
      img {
        width: 100%;
        height: 100% !important;
      }
    }
  }
  .banner-top {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    box-sizing: border-box;
    > img:first-child {
      width: 10px;
    }
    div {
      img:first-child {
        margin-right: 10px;
      }
      img {
        width: 16px;
      }
    }
  }
}
// house介绍
.house-introduce {
  padding: 15px 15px;
  border-bottom: 10px solid @bgcolor3;
  > div {
    margin-bottom: 8px;
  }
  .house-introduce-one {
    .flexBetweenCenter();
    color: @blackColor8;
    font-size: 15px;
    font-weight: bold;
    div:nth-child(2) {
      .flexStartCenter();
      font-size: 15px;
      color: @blackColor7;
      font-weight: normal;
      img {
        width: 18px;
        margin-right: 6px;
      }
    }
  }
  .house-introduce-two {
    .flexBetweenCenter();
    div:nth-child(1) {
      font-size: 12px;
      span {
        border-radius: 4px;
        padding: 2px 4px;
      }
      span:nth-child(1) {
        margin-left: 90px;
        color: #478ee5;
      }
      span:nth-child(2) {
        background-color: @blueColor5;
        color: #86b1ed;
      }
      span:nth-child(3) {
        background-color: #a89858;
        color: #b4a672;
      }
    }
    span {
      font-size: 12px;
      color: @blackColor7;
    }
  }
  .house-introduce-three {
    font-size: 17px;
    color: @blueColor10;
    font-weight: bold;
  }
  .house-introduce-four {
    font-size: 11px;
    color: @blackColor5;
    img {
      width: 8px;
    }
  }
}
//详情信息
.house-detail {
  padding: 15px 15px 5px;
  box-sizing: border-box;
  border-bottom: 10px solid @blackColor3;
  .houseId {
    .flexBetween();
    div:nth-child(1) {
      color: @blackColor8;
      font-weight: bold;
      font-size: 15px;
    }
    div:nth-child(2) {
      color: @blueColor5;
      font-size: 14px;
    }
  }
  > .house-detail-one {
    height: 98px;
    font-size: 12px;
    color: @blackColor8;
    margin-bottom: 10px;
    .flexColumn();
    > div {
      flex: 1;
      .flexBetweenCenter();
      font-weight: 600;
    }
  }
}
// 介绍更多
.house-more {
  padding: 15px 15px 0;
  > p {
    font-size: 15px;
    color: @blackColor8;
    font-weight: bold;
  }
  > p:nth-of-type(2) {
    span:nth-of-type(2) {
      font-size: 12px;
      color: @blackColor5;
      margin-left: 10px;
    }
  }
  > div {
    width: 100%;
    height: 140px;
    background-color: @blackColor1;
    margin: 10px 0;
    overflow: hidden;
  }
  > .house-more-detail {
    background-color: @white;
    height: auto;
    .project {
      .flexBetween();
      div:nth-child(1) {
        font-size: 12px;
        color: @blackColor8;
      }
    }
    .xiangmu {
      color: @blackColor7;
      font-size: 12px;
    }
    p:nth-of-type(1) {
      color: @blackColor7;
      font-size: 12px;
      font-weight: bold;
    }
    div:nth-child(2) {
      font-size: 12px;
      color: @blackColor7;
    }
    div:nth-child(3) {
      margin: 10px 0 0;
      img {
        width: 100%;
      }
    }
  }
}
// 按钮
.house-btn {
  .flexBetweenCenter();
  padding: 15px;
  margin-bottom: 10px;
  > div {
    width: 100%;
    height: 44px;
    background-color: @blueColor10;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 44px;
    border-radius: 4px;
  }
}
.house-btn1 {
  .flexBetweenCenter();
  padding: 15px;
  margin-bottom: 10px;
  > div {
    width: 100%;
    height: 44px;
    background-color: @blueColor3;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 44px;
    border-radius: 4px;
  }
}
.house-detail-two-bg {
  overflow: hidden;
}
</style>
